import PIcon from '@/component/common/pIcon'
import { Input, Flex, InputNumber } from 'antd'

export interface BlankItem {
  value: string
  type?: 'text' | 'number' | 'textarea'
  status?: '' | 'warning' | 'error' | undefined
}

export interface FillBlankProps {
  data?: Array<BlankItem>
  state: 'QUESTYPE' | 'WRITE' | 'READ' | 'PREVIEW' | 'TODO'
  onAnswersChange?: (answers: Array<any>) => void
  onDataChange?: (data: Array<BlankItem>) => void
}
export default function FillBlank(props: FillBlankProps) {
  let {
    data = [],
    state = 'QUESTYPE',
    onAnswersChange = () => {},
    onDataChange = () => {},
  } = props
  if (state === 'QUESTYPE') {
    data = [{ value: '第一空' }, { value: '第二空' }, { value: '第三空' }]
  }
  const appendData = (index: number) => {
    if (data.length >= 10) return
    onDataChange([
      ...data.slice(0, index + 1),
      { value: '' },
      ...data.slice(index + 1),
    ])
  }

  const removeData = (index: number) => {
    if (data.length <= 1) return
    const newSelections = [...data.slice(0, index), ...data.slice(index + 1)]
    onDataChange(newSelections)
  }

  return (
    <Flex vertical gap={'1rem'}>
      {data.map((item, index) => {
        let ComponentRes = null
        switch (item.type) {
          case 'number':
            ComponentRes = (
              <InputNumber
                disabled={['READ', 'PREVIEW'].includes(state)}
                value={item.value}
                status={item.status}
                placeholder={`第${index + 1}空`}
              />
            )
            break
          case 'textarea':
            ComponentRes = (
              <Input.TextArea
                disabled={['READ', 'PREVIEW'].includes(state)}
                value={item.value}
                status={item.status}
                placeholder={`第${index + 1}空`}
              />
            )
            break
          default:
            ComponentRes = (
              <Input
                disabled={['READ', 'PREVIEW'].includes(state)}
                value={item.value}
                onChange={(e) => {
                  let temp = data
                  temp[index].value = e.target.value
                  onAnswersChange(temp)
                }}
                status={item.status}
                placeholder={`第${index + 1}空`}
              />
            )
        }
        let Temp = (
          <Flex align="center" key={index}>
            {['WRITE', 'QUESTYPE', 'TODO'].includes(state)
              ? ComponentRes
              : `${index + 1}. ${item.value}`}
            &emsp;
            {['WRITE'].includes(state) && (
              <>
                <PIcon
                  name="icon-add-circle"
                  size={20}
                  onClick={() => appendData(index)}></PIcon>
                <PIcon
                  name="icon-minus-circle"
                  size={20}
                  onClick={() => removeData(index)}></PIcon>
              </>
            )}
          </Flex>
        )
        return Temp
      })}
    </Flex>
  )
}
